<template>
  <Modal :draggable="!$config.mask" :mask="$config.mask" :mask-closable="!$config.mask"
         :value="value"
         :width="1000"
         @on-ok="save" @on-visible-change="visibleChange">
    <p slot="header">
      给{{ modalData.data.displayName }}添加成员
    </p>
    <table-select-common
        ref="tableSelect" v-model="selectedUsers" :columns="columns" :items="items"
        :total-count="totalCount" placeholder="在所属单位、用户名、姓名、Email地址、电话号码中搜索" @on-change="getPage" :tag-show="true"
        display-property="name"
        :page-size="pageSize" :optional="optional"
        :connect-id="connectId" tag-color="success" :loading="$store.state.ou.loading">
    </table-select-common>
    <div slot="footer">
      <Button icon="md-close" @click="cancel">取消</Button>
      <Button icon="md-checkmark" type="primary" @click="save" :disabled="selectedUsers.length===0">确定</Button>
    </div>
  </Modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import UserExpand from '@/components/expand/user-expand.vue';
import TableSelectCommon from '@/components/select/table-select-common.vue';
import OU from '@/store/entities/administration/organization-unit/o-u';

@Component({
  components: {TableSelectCommon, UserExpand},
})
export default class UserModal extends AbpBase {
  name: string = 'UserModal';

  @Prop({type: Boolean, default: false}) value: boolean;
  @Prop({type: Object}) modalData: any;

  optional: any[] = [{key: 'gender', value: []}, {key: 'isActive', value: []}];

  selectedUsers: any[] = [];
  pageSize: number = 10;
  connectId: number = 0;

  columns = [
    {
      type: 'selection',
      width: 60,
      align: 'center',
    },
    {
      type: 'expand',
      width: 30,
      render: (h: any, params: any) => {
        return h(UserExpand, {
          props: {
            row: params.row,
          },
        }, []);
      },
    },
    {
      title: '所属单位',
      key: 'organizationUnit',
      align: 'center',
      minWidth: 180,
      render: (h: any, params: any) => {
        return h('span', {}, params.row.organizationUnits.map(el => el.displayName).join('，'));
      },
      ellipsis: true,
      tooltipTheme:'dark',
      tooltip: true,
      resizable: true,
    },
    {
      title: '用户名',
      key: 'userName',
      align: 'center',
      width: 120,
      sortable: this.$config.sorting.administration.user,
      tooltip: true,
      resizable: true,
      ellipsis: true,
      tooltipTheme:'dark',
    },
    {
      title: '姓名',
      key: 'name',
      align: 'center',
      width: 120,
      sortable: this.$config.sorting.administration.user,
      tooltip: true,
      resizable: true,
      ellipsis: true,
      tooltipTheme:'dark',
    },
    {
      title: '性别',
      key: 'gender',
      align: 'center',
      render: (h: any, params: any) => {
        if (params.row.gender) {
          return h('Icon', {
            props: {
              size: 20,
              color: this.$config.color.info,
              type: 'pandx fa fa-mars',
            },
          }, []);
        } else {
          return h('Icon', {
            props: {
              size: 20,
              color: this.$config.color.warning,
              type: 'pandx fa fa-venus',
            },
          }, []);
        }
      },
      width: 90,
      filters: [
        {
          label: '男',
          value: 1,
        }, {
          label: '女',
          value: 0,
        },
      ],
      filterRemote: (array) => {
        const index = this.optional.findIndex((item) => {
          return item.key === 'gender';
        });
        if (index !== -1) {
          this.optional.splice(index, 1);
        }
        this.optional.push({key: 'gender', value: array})
      },
      tooltip: true,
      resizable: true,
      ellipsis: true,
      tooltipTheme:'dark',
    },
    {
      title: '角色',
      key: 'roles',
      align: 'center',
      width: 180,
      render: (h: any, params: any) => {
        return h('span', {}, params.row.roles.map(el => el.roleName).join('，'));
      },
      tooltip: true,
      resizable: true,
      ellipsis: true,
      tooltipTheme:'dark',
    },
    {
      title: '激活',
      key: 'isActive',
      align: 'center',
      width: 90,
      render: (h: any, params: any) => {
        if (params.row.isActive) {
          return h('Icon', {
            props: {
              size: 20,
              color: this.$config.color.success,
              type: 'pandx fa fa-flash',
            },
          }, []);
        } else {
          return h('Icon', {
            props: {
              size: 20,
              color: this.$config.color.disabled,
              type: 'pandx fa fa-flash',
            },
          }, [])
        }
      },
      filters: [
        {
          label: '已激活',
          value: true,
        }, {
          label: '未激活',
          value: false,
        },
      ],
      filterRemote: (array) => {
        const index = this.optional.findIndex((item) => {
          return item.key === 'isActive';
        });
        if (index !== -1) {
          this.optional.splice(index, 1);
        }
        this.optional.push({key: 'isActive', value: array})
      },
      tooltip: true,
      resizable: true,
      ellipsis: true,
      tooltipTheme:'dark',
    },
  ];



  get totalCount() {
    return this.$store.state.ou.pagedUsers.totalCount;
  }

  get items() {
    return this.$store.state.ou.pagedUsers.items;
  }



  async getPage(args) {
    await this.$store.dispatch({
      type: 'ou/findUsers',
      data: args,
    });
  }

  reset() {
    this.selectedUsers = [];
    (this.$refs.tableSelect as any).filter = '';
    (this.$refs.tableSelect as any).sorting = '';
    (this.$refs.tableSelect as any).currentPage = 1;
  }

  async visibleChange(value: boolean) {
    if (!value) {
      this.reset();
      this.$emit('input', value);
    } else {
      this.connectId = this.modalData.data.id;
      await this.getPage({
        sorting: '',
        filter: '',
        maxResultCount: this.pageSize,
        skipCount: 0,
        connectId: this.connectId,
        gender: [],
        isActive: [],
      });
    }
  }

  async save() {
    await this.$store.dispatch({
      type: 'ou/addUsersToOrganizationUnit',
      data: {
        organizationUnitId: this.modalData.data.id,
        userIds: this.selectedUsers.map((item) => {
          return item.id;
        }),
      },
    });
    this.$emit('save-success', true, this.modalData.data);
    this.$emit('input', false);
  }

  cancel() {
    this.$emit('input', false);
  }


}
</script>

<style lang="less" scoped>
.v-transfer-dom::v-deep {

  .ivu-table-body {
    height: 407px;
    min-height: 407px;
    overflow-y: auto;
  }

  .ivu-table-tip {
    height: 407px;
    min-height: 407px;
    overflow-y: auto;
  }
}
</style>
